<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Painting with Cairo in JavaScript GTK</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK, Cairo, drawing, JavaScript, programming, Linux">
<meta name="description" content="This part of the JavaScript GTK tutorial covers painting with Cairo.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Painting with Cairo</h1>

<p>
In this part of the JavaScript GTK tutorial, we will do some painting with the Cairo library.
Currently, Seed supports only a small portion of the Cairo library. 
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
<b>Cairo</b> is a library for creating 2D vector graphics. 
We can use it to draw our own widgets, charts or various effects or animations. 
</p>


<h2>Colors</h2>

<p>
In the first example, we will work with colors. A color is an object representing a combination of 
Red, Green, and Blue (RGB) intensity values.
Cairo valid RGB values are in the range 0 to 1. 
</p>

<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

In this program, we will draw three
colored rectangles on the drawing area
using Cairo

author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/

Gtk = imports.gi.Gtk;
cairo = imports.cairo;


Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {
        init_ui(this);       
        
        function init_ui(w) {
          
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(360, 100);
            w.set_title("Colors");
            w.set_position(Gtk.WindowPosition.CENTER);           
                            
            var darea = new Gtk.DrawingArea();
        
            darea.signal.expose_event.connect(on_expose);
            
            w.add(darea);          
            w.show_all(); 
        }
        
        function on_expose(darea) {
          
            print(darea);

            var cr = new cairo.Context.from_drawable(darea.window);
            draw_colors(cr);
        }
  
    
        function draw_colors(cr) {
        
            cr.set_source_rgb(0.2, 0.23, 0.9);
            cr.rectangle(10, 15, 90, 60);
            cr.fill();
            
            cr.set_source_rgb(0.9, 0.1, 0.1);
            cr.rectangle(130, 15, 90, 60);
            cr.fill();

            cr.set_source_rgb(0.4, 0.9, 0.4);
            cr.rectangle(250, 15, 90, 60);
            cr.fill();            
        }        
    }              
});


var window = new Example();
Gtk.main();
</pre>

<p>
In our example, we will draw three rectangles and fill them with
three different colors. 
</p>

<pre class="explanation">
var darea = new Gtk.DrawingArea();
</pre>

<p>
We will be doing our drawing operations on the <b>DrawingArea</b> 
widget. 
</p>

<pre class="explanation">
darea.signal.expose_event.connect(on_expose);
</pre>

<p>
When the window needs to be redrawn, the 
the <b>expose_event</b> is triggered. In response to this event,
we call the <b>on_expose()</b> method. 
</p>

<pre class="explanation">
var cr = new cairo.Context.from_drawable(darea.window);
</pre>

<p>
We create the cairo context object from the
<b>GdkWindow</b> of the drawing area. The context is an
object onto which we do all our drawings. 
</p>

<pre class="explanation">
draw_colors(cr);
</pre>

<p>
The actual drawing is delegated to the <b>draw_colors()</b> method. 
</p>

<pre class="explanation">
cr.set_source_rgb(0.2, 0.23, 0.9);
</pre>

<p>
The <b>set_source_rgb()</b> method sets a color for the 
cairo context. The three parameters of the method are the color intensity
values. 
</p>

<pre class="explanation">
cr.rectangle(10, 15, 90, 60);
</pre>

<p>
We draw a rectangle. The first two parameters are the x, y coordinates of the
top left corner of the rectangle. The last two parameters are the width and height
of the rectangle. 
</p>

<pre class="explanation">
cr.fill();
</pre>

<p>
We fill the inside of the rectangle with the current color. 
</p>

<img src="/img/gui/jsgtk/colors.png" alt="Colors">
<div class="figure">Figure: Colors</div>


<h2>Basic shapes</h2>

<p>
The next example draws some basic shapes onto the window. 
</p>

<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This code example draws basic shapes
with the Cairo library

author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/

Gtk = imports.gi.Gtk;
cairo = imports.cairo;


Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {
        init_ui(this);       
        
        function init_ui(w) {
          
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(390, 240);
            w.set_title("Basic shapes");
            w.set_position(Gtk.WindowPosition.CENTER);           
                            
            var darea = new Gtk.DrawingArea();
        
            darea.signal.expose_event.connect(on_expose);
            
            w.add(darea);          
            w.show_all(); 
        }
        
        function on_expose(darea) {

            var cr = new cairo.Context.from_drawable(darea.window);
            draw_colors(cr);
        }
  
    
        function draw_colors(cr) {
        
            cr.set_source_rgb(0.6, 0.6, 0.6);

            cr.rectangle(20, 20, 120, 80);
            cr.rectangle(180, 20, 80, 80);
            cr.fill();

            cr.arc(330, 60, 40, 0, 2*Math.PI);
            cr.fill();
            
            cr.arc(90, 160, 40, Math.PI/4, Math.PI);
            cr.fill();

            cr.translate(220, 180);
            cr.scale(1, 0.7);
            cr.arc(0, 0, 50, 0, 2*Math.PI);
            cr.fill();
        }        
    }              
});


var window = new Example();
Gtk.main();
</pre>

<p>
In this example, we will create a rectangle, a square, a circle, an arc and an ellipse. 
We draw outlines in blue color, insides in white. 
</p>

<pre class="explanation">
cr.rectangle(20, 20, 120, 80);
cr.rectangle(180, 20, 80, 80);
cr.fill();
</pre>

<p>
These lines draw a rectangle and a square. 
</p>

<pre class="explanation">
cr.arc(330, 60, 40, 0, 2*Math.PI);
cr.fill();
</pre>

<p>
Here the <b>arc()</b> method draws a full circle.
</p>

<pre class="explanation">
cr.translate(220, 180);
cr.scale(1, 0.7);
cr.arc(0, 0, 50, 0, 2*Math.PI);
cr.fill();
</pre>

<p>
The <b>translate()</b> method moves the object to a specific
point. If we want to draw an oval, we do some scaling first. Here the 
<b>scale()</b> method shrinks the y axis.
</p>


<img src="/img/gui/jsgtk/shapes.png" alt="Basic shapes">
<div class="figure">Figure: Basic shapes</div>



<h2>Transparent rectangles</h2>

<p>
Transparency is the quality of being able to see through a material. 
The easiest way to understand transparency is to imagine a piece of 
glass or water. Technically, the rays of light can go
through the glass and this way we can see objects behind the glass.
</p>

<p>
In computer graphics, we can achieve transparency effects using alpha 
compositing. Alpha compositing is the process of combining an image with 
a background to create the appearance of partial transparency. 
The composition process uses an alpha channel. (wikipedia.org, answers.com)
</p>

<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This program shows transparent
rectangles using Cairo

author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/

Gtk = imports.gi.Gtk;
cairo = imports.cairo;

Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {
        init_ui(this);       
        
        function init_ui(w) {
          
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(590, 90);
            w.set_title("Transparent rectangles");
            w.set_position(Gtk.WindowPosition.CENTER);           
                            
            var darea = new Gtk.DrawingArea();
        
            darea.signal.expose_event.connect(on_expose);
            
            w.add(darea);          
            w.show_all(); 
        }
        
        function on_expose(darea) {         

            var cr = new cairo.Context.from_drawable(darea.window);
            draw_rectangles(cr);
        }
    
        function draw_rectangles(cr) {
        
            for (var i=1; i&lt;=10; i++) {
                cr.set_source_rgba(0, 0, 1, i*0.1);
                cr.rectangle(50*i, 20, 40, 40);
                cr.fill();
            }
        }                        
    }              
});


var window = new Example();
Gtk.main();
</pre>

<p>
In the example we will draw ten rectangles with different levels of transparency. 
</p>

<pre class="explanation">
cr.set_source_rgba(0, 0, 1, i*0.1);
</pre>

<p>
The last parameter of the <b>set_source_rgba()</b> method is the
alpha transparency.
</p>


<img src="/img/gui/jsgtk/transparency.png" alt="Transparent rectangles">
<div class="figure">Figure: Transparent rectangles</div>


<p>
In this chapter of the JavaScript GTK tutorial, we were painting 
with Cairo library.
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified July 30, 2011  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
